<script setup lang="tsx">
import { CurdData, FieldEnum, SchemaConfig } from '@/api/customer/types'
import { useClipboard } from '@vueuse/core'
import { ElMessage } from 'element-plus'
const { t } = useI18n()
const { copy } = useClipboard()
// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)

// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}
// 定义具体的类型
interface CurrentRowType {
  items?: any[] // 使用可选属性，因为 items 可能不存在
}

// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object as PropType<CurrentRowType | null>
  }
})

// 定义 dataList 变量
const dataList = ref<any[]>([])

// 检查 props.currentRow 是否存在
if (props.currentRow) {
  dataList.value = props.currentRow.items || []
}

const tableLoading = ref<boolean>(false)
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>抓取商品</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <!--    列表-->
        <el-table
          class="m-t-60px"
          v-if="dataList.length"
          :data="dataList"
          highlight-current-row
          stripe
          border
          v-loading="tableLoading"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column :label="t('expandCustomer.productID')" prop="product_id" width="300" />
          <el-table-column prop="link" :label="t('expandCustomer.linkToTheProduct')" width="300">
            <template #default="{ row }">
              <ElLink type="primary" :href="row.product_url" target="_blank"
                >{{ t('expandCustomer.jump') }}
              </ElLink>
              <ElButton
                link
                class="m-l-4"
                type="primary"
                @click="(copy(row.product_url) as any) && ElMessage.success('复制成功')"
              >
                {{ t('expandCustomer.replication') }}
              </ElButton>
            </template>
          </el-table-column>
          <el-table-column
            :label="t('expandCustomer.productTitle')"
            prop="product_title"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
